<script setup lang="jsx">
import { COLUMNS } from '../constants'

// 接收属性
const props=defineProps({
  data:{
    type:Object,
    default:[]
  },
  bordered:Boolean,
  hover:Boolean,
  size:Number,
  total:Number,
  pagination:{
    type:Object,
    default:{}
  }
})

// 接收事件
const emits=defineEmits(['onPageChange','handleBulid','handleEdit'])

// 当前子组件onPageChange事件函数
const onPageChange=(pageInfo)=>{
  emits('onPageChange',pageInfo)
}

// 执行新增事件
const handleBulid=()=>{
  emits('handleBulid')
}

// 执行编辑事件
const handleEdit=(row)=>{
  emits('handleEdit',row)
}
</script>

<template>
  <div class="baseList">
    <div class="tableBoxs">
      <div class="newBox">
        <button class="bt wt-120" @click="handleBulid()">
          新增护理项目
        </button>
      </div>
      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table row-key="index" :data="data" :columns="COLUMNS" :bordered="bordered" :hover="hover" :size="size"
        :show-header="showHeader" cell-empty-content="-" resizable lazy-load>

        <!-- 图片预览处理 -->
        <template #image="{ row }">
          <div>
            <div class="tdesign-demo-image-viewer__base">
              <t-image-viewer :images="[row.image]">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image">
                    <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                    <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                      <span>
                        <BrowseIcon size="1.4em" /> 预览
                      </span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </div>
          </div>
        </template>

        <!-- 价格处理 -->
        <template #price="{row}">
          {{ row.price.toFixed(2) }}
        </template>

        <!-- 序号 -->
        <template #rowIndex="{ rowIndex }">
          {{ (pagination.pageNum-1)*pagination.pageSize+(rowIndex + 1) }}
        </template>


        <!-- 操作栏 -->
        <template #op="{ row }">
          <div class="operateCon">
            <a class="btn-dl" :class="row.count > 0 ? 'disabled' : ''">删除</a>
            <a class="font-bt" :class="row.count > 0 ? 'disabled' : ''" @click="handleEdit(row)">编辑</a>
            <a class="delete" :class="row.count > 0 && row.status === 1
              ? 'disabled btn-dl'
              : row.status === 1
                ? 'btn-dl'
                : 'font-bt'
              " @click="handleForbidden(row)">{{ row.status === 1 ? '禁用' : '启用' }}</a>
          </div>
        </template>

      </t-table>

      <!-- 分页 -->
      <t-pagination v-if="total > 4" v-model="pagination.pageNum" v-model:pageSize="pagination.pageSize" :total="total"
        @change="onPageChange" />

    </div>
  </div>
</template>

<style scoped>

</style>